<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>商品分类管理</title>
    <!--树style设置-->
    <style>
        html {
            margin: 0;
            padding: 0;
            font-size: 62.5%;
        }

        body {
            max-width: 600px;
            min-width: 300px;
            margin: 0 auto;
            padding: 20px 10px;
            font-size: 14px;
            font-size: 1.4em;
        }

        h1 {
            font-size: 1.8em;
        }

        .demo {
            overflow: auto;
            border: 1px solid silver;
            min-height: 100px;
        }
    </style>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--<link rel="shortcut icon" href="favicon.ico">-->
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/plugins/webuploader/webuploader.css" rel="stylesheet" type="text/css">
    <link href="css/demo/webuploader-demo.css" rel="stylesheet" type="text/css">
    <link href="css/plugins/fileinput/fileinput.css" rel="stylesheet" type="text/css"/>
    <link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <!--jsTree-->
    <link href="css/plugins/jsTree/style.min.css" rel="stylesheet" type="text/css">
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/core.js"></script>

    <!-- jQuery Validation plugin javascript-->
    <script src="js/plugins/validate/jquery.validate.min.js"></script>
    <script src="js/plugins/validate/messages_zh.min.js"></script>

    <!-- fileinput -->
    <script src="js/plugins/fileinput/fileinput.js"></script>
    <script src="js/plugins/fileinput/fileinput_locale_zh.js"></script>

    <!-- 日期layerDate plugin javascript -->
    <!-- <script src="js/plugins/layer/laydate/laydate.js"></script>
     <script src="js/demo/laydate-demo.js"></script>-->
    <!-- summernote -->
    <script src="js/plugins/summernote/summernote.min.js"></script>
    <script src="js/plugins/summernote/summernote-zh-CN.js"></script>
    <script src="js/demo/summernote-demo.js"></script>
    <!--jsTree-->
    <script src="js/plugins/jsTree/jstree.js"></script>
    <script src="js/plugins/jsTree/jstree.min.js"></script>


</head>
<body>
<h1>商品分类管理</h1>
<div id="title_div" class="form-group">
    <label class="col-sm-3 control-label">发布产品线</label>
    <div class="col-sm-8">
        <select id="cateType" name="cateType" style="height:31px;border-radius: 3px;border: solid 1px #ddd;">
            <option value="0">蜜哆哆</option>
            <option value="1">蜜雅阁</option>
            <option value="2">品牌馆</option>
        </select>
    </div>
</div>
<div>
    <button type="button" class="btn btn-success btn-sm" onclick="lv1_create();"><i
            class="glyphicon glyphicon-asterisk"></i>新建商品大类
    </button>
    <button id="btn_refresh_tree" type="button" class="btn btn-warning btn-sm"><i
            class="glyphicon glyphicon-refresh"></i> 刷新
    </button>
    <!-- 搜索框 -->
    <div class="search_input">
        <input type="text" id="search_ay" placeholder="输入关键词自动搜索"/>
        <button id="btn_search">搜索</button>

    </div>
</div>
<div id="jstree_demo" class="demo"></div>
<div>
    <label style="font-size: 15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前选择的商品分类为：<span
            id="curCatePath" style="color:#07d;">未选择分类</span></label>
    <div>
        <!--        <div id="title_div" class="form-group" >
                    <label class="col-sm-3 control-label" style="margin-bottom: 10px">分类描述：</label>
                    <div class="col-sm-8" style="margin-bottom: 10px">
                        <input id="subtitle" name="subtitle"  type="text"
                               class="form-control">
                    </div>
                </div>-->
        <div id="previous_picture_div" class="form-group" style="display: none;">
            <label class="col-sm-3 control-label">原分类图：</label>
            <div class="col-sm-8">
                <span id="pictureUrl" name="pictureUrl"
                      class="footable-sort-indicator"></span>
            </div>
        </div>
        <div id="jiu_picture_div" class="form-group" style="display: none;">
            <label class="col-sm-3 control-label">旧分类图(将更新到服务器)：</label>
            <div class="col-sm-8">
                <span id="oldpic" name="oldpic"
                      class="footable-sort-indicator"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">新分类图片（一张）：</label>
            <div class="col-sm-8">
                <div class="page-container">
                    <input type="file" id="fileupload2" name="file">
                </div>
            </div>
            <span style="display: none;" id="uploadSuccessImg"></span>
        </div>

    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-3" style="margin: 10% auto 10% 25%;">
            <button class="btn btn-primary" type="button" onclick="onSave()">保存</button>
            <!--<button class="btn btn-primary" type="button" onclick="test()">测试</button>-->

        </div>
    </div>
</div>

<script>
    $(function () {
        //分类图片初始化
        initClassifyFileInput("fileupload2", urlcore + "/api/attachment/upload", "#oldpic");
        // 分类图片地址

    });


    function onSave() {
        /*    //分类描述
            var subtitle=$("#subtitle").val();*/
        //分类id
        var classifyId = getClassifyId();
        if (classifyId == "" || classifyId == undefined || classifyId == "#") {
            alert("请先选择商品分类！");
            return;
        }
        //分类图片
        var pictureUrl = "";
        $("#oldpic img").each(function (index, item) {
            if (index == 0) {
                pictureUrl = $(this).attr("src");
            }
        });
        if (pictureUrl == "") {
            alert("请先选择图片");
            return;
        }
        //添加或修改分类图片和描述
        $.ajax({
            type: "POST",
            url: urlcore + "/api/classify/update",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify({
                id: classifyId,
//                subtitle: subtitle,
                pictureUrl: pictureUrl,

            }),
            success: function (data) {
                initDetail();
                alert("修改分类信息成功！");
                var picSrc = data.data.pictureUrl;
                //显示更新后的图片
                showPicAfterSave(picSrc);
                //刷新fileinput插件
                $("#fileupload2").fileinput("refresh");
            },
            error: function () {
                alert("修改分类信息失败！");
            }
        });
    }

    //显示更新后的图片,并插入或更新tree中node的original中的pictureUrl
    function showPicAfterSave(picSrc) {
        var instance = $('#jstree_demo').jstree(true);
        //获取当前node
        var curNode=instance.get_node(getClassifyId());
        //更新node中original的图片信息，使切换的时候还能显示
        curNode.original.picture_url=picSrc;
        console.log("select zz node:",curNode);
        $('#previous_picture_div').css("display", "block");
        var imgStr1 = "";
        imgStr1 +=
            '<div style="position:relative;width:180px;height:auto;float:left;" display="block">' +
            '	<img style="padding: 5px 5px 5px 5px;" width="auto" height="150px" src="' + picSrc + '">' +
            '</div>';
        $('#pictureUrl').html(imgStr1);
    }

    function test() {
        var pictureUrl = "";
        $("#pictureUrl img").each(function (index, item) {
            if (index == 0) {
                pictureUrl = $(this).attr("src");
            }
        });
        console.log(pictureUrl);
    }

    //获取分类树当前选中分类
    function getClassifyId() {
        var instance = $('#jstree_demo').jstree(true);
        classifyId = instance.get_selected()[0]
        return classifyId;
    }

    //    $('#jstree_demo').on("select_node.jstree", function (e, data) {
    //      /*  形如
    //        original:
    //        {id:50
    //        parent:"49"
    //        picture_url:"http://127.0.0.1:8080//ATTACHMENT/0b75295b-df1e-4860-a5ce-390c467c8856/d7341d16-8bb4-4402-82f0-330056fb7f96.jpg"
    //        subtitle:"这是出生地的分类描述"
    //        text:"出生地"}
    //        */
    //        var original=data.node.original;
    //        console.log("original:",original);
    //        //取出选中树节点的源数据
    //        $("#subtitle").val(original.subtitle);
    //        var picSrc=original.picture_url;
    //        if(picSrc==undefined){
    //            $('#previous_picture_div').hide();
    //        }else{
    //            $('#previous_picture_div').css("display", "block");
    //            var imgStr1 = "";
    //            imgStr1 +=
    //                '<div style="position:relative;width:250px;height:250px;float:left;" display="block">' +
    //                '	<span onclick="removeStrHtml(this)" style="position:absolute;top:10px;right:10px;font-size:20px;color:#f00;" class="glyphicon glyphicon-trash" aria-hidden="true">' +
    //                '	</span>' +
    //                '	<img style="padding: 5px 5px 5px 5px;" width="250px" height="250px" src="' + picSrc + '">' +
    //                '</div>';
    //            $('#pictureUrl').html(imgStr1);
    //        }
    //        var instance = $('#jstree_demo').jstree(true);
    //        curCatePath = data.instance.get_path(data.selected[0], ">", 0);
    //        //获取当前选择目录路径
    //        console.log("selected的data数据", data.instance.get_path(data.selected[0], ">", 0));
    //        $("#curCatePath").text(curCatePath);
    //    });


    function demo_rename(cateType) {
        var postdata = "{";
        postdata += '"title":"' + "新大类" + '"';
        postdata += '"cateType":"' + cateType + '"';
        // postdata += ',"parentID":' + parseInt(data.rslt.parent.attr("id").replace("li_", ""));
        postdata += "}";
        $.ajax({
            type: "post",
            url: urlcore + "/api/classify/addClassify",
            contentType: "application/json;charset=utf-8",
            data: postdata,
            success: function (data1) {
                var id = parseInt(data1.data.id);
                // $(data.rslt.obj).attr("id", "li_" + data1.d);
                var instance = $('#jstree_demo').jstree(true);
                instance.deselect_all();
                instance.select_node(id);
                instance.edit(id, "");
            },
            error: function () {
                alert("创建新大类失败");
            }
        });
    };

    function demo_delete() {
        var instance = $('#jstree_demo').jstree(true);
        //var cur = instance.get_selected();
        instance.create_node('#', {
            "text": "Child 2",
            "type": "root"
        });
    };

    //初始化fileinput控件（第一次初始化）
    function initClassifyFileInput(ctrlName, uploadUrl, okName, maxnNum) {
        var control = $('#' + ctrlName);

        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
            resizeImage: true,
            resizePreference: 'width',
            resizeImageQuality: 0.2,
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: true,//是否显示拖拽区域
            maxFileCount: 1, //表示允许同时上传的最大文件个数
            dropZoneTitle: '拖拽文件到这里 &hellip;',
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        }).on("fileuploaded", function (event, data, key) {
            if (data.response) {
                var okData = data.response.data;
                for (var i = 0; i < okData.length; i++) {
                    var strHtml =
                        '<div style="position:relative;width:250px;height:250px;float:left;display:none" id="' + key + '">' +
                        '	<span onclick="removeStrHtml()" style="position:absolute;top:10px;right:10px;font-size:20px;color:#f00;" class="glyphicon glyphicon-trash" aria-hidden="true">' +
                        '	</span>' +
                        '	<img style="padding: 5px 5px 5px 5px;" width="250px" height="250px" src="' + okData[i] + '">' +
                        '</div>';
                    $(okName).append(strHtml);
                }
            }
        }).on('filesuccessremove', function (event, key) {
            $("#" + key).remove();
        }).on('filecleared', function (event) {
            $(okName).html("");
            console.log("filecleared");
        });
        ;
    }

    /**
     * js文件中有另两个change和click事件，内容不同，同时触发
    **/
    $("#cateType").change(function () {
        // 初始化原详情
        initDetail();
    });
    $('#btn_refresh_tree').on('click', function () {
        /*    var ins = $('#jstree_demo').jstree(true);
            ins.refresh();*/
        // 初始化原详情
        initDetail();
    });

    //刷新树或更改产品线后初始化基本信息
    function initDetail() {
        $("#oldpic").html("");
        $("#previous_picture_div").hide();
        $("#pictureUrl").html("");
//        $("#subtitle").val("");
        //刷新fileinput插件
        $("#fileupload2").fileinput("refresh");

    }
</script>
<!-- 自定义js -->
<script src="js/goods_category.js"></script>
</body>
</html>